<template>
  <view class="collect-page">
    <view class="collect-title">亚洲杯竞足5场预测(文章标题)足5场预测(文章标题)足5场预测(文章标题)足5场预测(文章标题)</view>
    <view class="collect-head">
      <view class="collect-img">
        <image src="../../static/img/userPage/userPage.png" mode=""></image>
      </view>
      <view class="collect-info">
        <view class="collect-name">叮叮老师看球</view>
        <view class="collect-label">
          <view class="collect-time">2024-1-12 16:23:01</view>
          <view class="collect-price">
            <image src="@/static/icon/wallet/species.png" mode=""></image>
            188
          </view>
        </view>
      </view>
    </view>
    <view class="collect-annex">
      <image src="@/static/icon/specialcolumnPage/money.png" mode=""></image>
      <view class="annex-title">Ta的专栏【叮叮老师看球】</view>
      <view class="annex-num">
        5篇在售
        <u-icon name="arrow-right" color="#909090"></u-icon>
      </view>
    </view>
    <view class="collect-text">
      <image src="@/static/icon/specialcolumnPage/way.png" mode="" class="text-way"></image>
      <view class="text-title">
        成功9连红，昨日亚洲杯3中2！今晚继续关注亚洲杯小组赛，解析韩国VS巴林的亚洲…(文章正文)成功9连红，昨日亚洲杯3中2！今晚继续关注亚洲杯小组赛，解析韩国VS巴林的亚洲…(文章正文)
      </view>
      <image src="@/static/icon/specialcolumnPage/red.png" mode="" class="text-state" v-show="state ===1"></image>
      <image src="@/static/icon/specialcolumnPage/walk.png" mode="" class="text-state" v-show="state === 2"></image>
      <image src="@/static/icon/specialcolumnPage/black.png" mode="" class="text-state" v-show="state ===3"></image>
    </view>
    <u-divider text="以下为付费内容" textColor="#909090" lineColor="#B5B5B5"></u-divider>
    <view class="collect-pay" v-show="payState">
      <view class="pay-title">预测胜平负比分为3:1</view>
      <image src="../../static/img/collectPage/selling.png" mode=""></image>
    </view>
    <view class="collect-pay-btn" v-show="!payState">
      <u-button text="188金币解锁后继续阅读" color="#2F7EFC" throttleTime="1000" @click="onPay"></u-button>
    </view>
    <view class="collect-statement">
      免责声明：所有文章内容仅代表作者个人意见，仅供参考。红料星球不对图片与文字的及时性，准确性，完整性做任何保证。用户应独立决策并自行承担风险。
    </view>
    <view class="collect-manage" v-if="userType === '1'">
      <view class="manage-title">
        <view class="manage-name">加标签</view>
        <view class="manage-btn">
          <u-button text="取消标签" shape="circle" plain icon="reload" size="mini" iconColor="#134177" color="#134177"
            @click="onCancellation"></u-button>
        </view>
      </view>
      <view class="manage-list">
        <image :src="item.img" mode="" v-for="item,index in manageList" :key="index" @click="onManage(item.type)">
        </image>
      </view>
    </view>
    <PayPopup :show="payShow" @popupClose="onPopupClose" @payState="onPayState"></PayPopup>
  </view>
</template>

<script>
  import PayPopup from './components/PayPopup/index.vue'
  export default {
    components: {
      PayPopup
    },
    data() {
      return {
        payShow: false,
        payState: false,
        state: 1,
        userType: '0',
        manageList: [{
          img: '../../static/icon/specialcolumnPage/red.png',
          type: 1,
        }, {
          img: '../../static/icon/specialcolumnPage/walk.png',
          type: 2,
        }, {
          img: '../../static/icon/specialcolumnPage/black.png',
          type: 3,
        }]
      }
    },
    onLoad(e) {
      if (e && e.type) {
        this.userType = e.type
        if (e.type === '1') {
          this.payState = true
        }
      }
    },
    methods: {
      onPopupClose(val) {
        console.log(val, 33333);
        this.payShow = val
      },
      onPay() {
        this.payShow = true
      },
      onManage(type) {
        this.state = type
      },
      onCancellation() {
        this.state = 0
      },
      onPayState(val) {
        this.payState = val
        this.payShow = false
      }
    }

  }
</script>

<style lang="less" scoped>
  .collect-page {
    box-sizing: border-box;
    padding: 40rpx 40rpx 264rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .collect-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #313131;
    }

    .collect-head {
      height: 90rpx;
      margin-top: 20rpx;
      display: flex;

      .collect-img {
        width: 90rpx;
        height: 90rpx;
        border-radius: 10rpx;

        image {
          width: 90rpx;
          height: 90rpx;
          border-radius: 10rpx;
        }
      }

      .collect-info {
        margin-left: 22rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #313131;
        flex: 1;

        .collect-label {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .collect-time {
            font-size: 24rpx;
            font-weight: 500;
            color: #909090;
          }

          .collect-price {
            display: flex;
            align-items: center;

            image {
              height: 46rpx;
              width: 46rpx;
            }
          }
        }
      }
    }

    .collect-annex {
      width: 670rpx;
      height: 72rpx;
      background: rgba(239, 239, 239);
      border-radius: 10rpx;
      margin-top: 24rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #909090;

      image {
        width: 40rpx;
        height: 34rpx;
      }

      .annex-title {
        flex: 1;
        margin-left: 12rpx;
      }

      .annex-num {
        display: flex;
      }
    }

    .collect-text {
      width: 100%;
      margin-top: 60rpx;
      padding: 20rpx 30rpx 46rpx;
      position: relative;
      background-color: #F8F8F8;
      box-sizing: border-box;
      border-radius: 10rpx;

      :before {
        content: '';
        display: block;
        position: absolute;
        top: -76rpx;
        left: 30rpx;
        border: 40rpx solid transparent;
        border-bottom-color: #F8F8F8;
        border-radius: 10rpx;
      }

      .text-way {
        height: 40rpx;
        width: 54rpx;

      }

      .text-title {
        font-size: 28rpx;
        font-weight: 500;
        color: #909090;
      }

      .text-state {
        height: 112rpx;
        width: 112rpx;
        position: absolute;
        top: -50rpx;
        right: 22rpx;
      }
    }

    .collect-pay {
      background: rgba(248, 248, 248);
      border: 2px solid #CBCBCB;
      border-radius: 10rpx;
      box-sizing: border-box;
      padding: 30rpx;

      .pay-title {
        font-size: 28rpx;
        font-weight: 500;
        color: #909090;
      }

      image {
        width: 610rpx;
        height: 406rpx;
        margin-top: 26rpx;
      }
    }

    .collect-pay-btn {
      margin-top: 20rpx;
      box-sizing: border-box;
      padding: 0 22rpx;

      /deep/.u-button__text {
        font-size: 36rpx !important;
      }
    }

    .collect-statement {
      box-sizing: border-box;
      padding: 0 15rpx;
      margin-top: 30rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #909090;
    }

    .collect-manage {
      width: 750rpx;
      height: 246rpx;
      background: rgba(255, 255, 255);
      position: fixed;
      bottom: 0;
      left: 0;
      box-shadow: 0rpx 2rpx 20rpx rgba(0, 0, 0, 0.16);

      .manage-title {
        position: relative;
        height: 40rpx;
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .manage-name {
          font-size: 28rpx;
          font-weight: 500;
          color: #313131;
          text-align: center;
        }

        .manage-btn {
          width: 148rpx;
          height: 38rpx;
          position: absolute;
          right: 30rpx;
          top: 0;
        }
      }

      .manage-list {
        margin-top: 38rpx;
        box-sizing: border-box;
        padding: 0 138rpx 50rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        image {
          height: 98rpx;
          width: 98rpx;
        }
      }
    }
  }
</style>